// shadow光线效果
@property --xPoint {
    syntax: '<length>';
    inherits: false;
    initial-value: 400px;
}
@property --yPoint {
    syntax: '<length>';
    inherits: false;
    initial-value: 300px;
}
@property --x2Point {
    syntax: '<length>';
    inherits: false;
    initial-value: 500px;
}
@property --y2Point {
    syntax: '<length>';
    inherits: false;
    initial-value: 300px;
}

.css-sub2 {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;

    :global {
        .anchor {
            padding: 15px;
            width: 86.2%;
            height: 60px;
            background: white;
            position: fixed;
            z-index: 99;
        }

        .bac {
            padding: 70px 0 15px 15px;
            margin-top: 10px;
        }

        .background_1 {
            width: 100%;
            height: auto;
            box-shadow: 0px 0px 20px 5px rgba(167, 187, 167, 0.808);

            .clip {
                width: 500px;
                height: auto;
                padding: 15px 0px;
                display: flex;

                p {
                    font-size: 50px;
                    text-decoration: none;
                    text-transform: uppercase;
                    -webkit-text-stroke: 2px #1481e7b7;
                    color: transparent;
                    transition: 0.5s linear;
                    background: linear-gradient(#198ce6 0 100%) left/0 no-repeat;
                    -webkit-background-clip: text;

                    &:hover {
                        background-size: 100%;
                    }
                }
            }

            .clip-scroll {
                width: 450px;
                height: 180px;
                background-color: black;
                margin: 15px 0px;
                color: transparent;
                font-size: 20px;
                -webkit-text-stroke: 1px #fff;
                overflow: hidden;
                position: relative;

                .basepic:local {
                    width: 100%;
                    height: 600px;
                    top: 0;
                    position: absolute;
                    mix-blend-mode: darken;
                    background: linear-gradient(
                        -3deg,
                        #000,
                        #000 25%,
                        #ffb6ff 30%,
                        #ffb6ff,
                        #b344ff,
                        #b344ff 70%,
                        #000 75%,
                        #000
                    );
                    // animation: textScroll 6s infinite linear alternate;
                    // @keyframes textScroll {
                    //     100% {
                    //         transform: translate(0, -80%);
                    //     }
                    // }
                }
            }
        }

        .background_2 {
            width: 100%;
            height: 100vh;
            position: relative;
            box-shadow: 0px 0px 20px 0px rgba(230, 203, 152, 0.808);
            .bg {
                margin-top: 100px;
                width: 100%;
                height: 700px;
                background-repeat: no-repeat;
                background-image: url('../../../assets/image/luori.jpg');
                background-size: 100%;
                background-attachment: fixed;
                overflow-y: scroll;
            }
        }
        .boxShadow_1 {
            width: 100%;
            height: 100vh;
            box-shadow: 0px 0px 20px 0px rgba(152, 230, 182, 0.808);
            // background: #000;
            padding: 15px;
            .wrap:local {
                width: 100%;
                height: 100%;
                position: relative;
                background: conic-gradient(
                        from -45deg at var(--xPoint) var(--yPoint),
                        hsla(170deg, 100%, 70%, 0.7),
                        transparent 50%,
                        hsla(219deg, 90%, 80%, 0.5) 100%
                    ),
                    conic-gradient(
                        from 180deg at var(--x2Point) var(--y2Point),
                        hsla(170deg, 100%, 70%, 0.7),
                        transparent 50%,
                        hsla(219deg, 90%, 80%, 0.5) 100%
                    ),
                    linear-gradient(-45deg, #060d5e, #002268);
                animation: pointMove 2.5s infinite alternate linear;
                overflow: hidden;
            }
            .shadowTop:local {
                position: absolute;
                top: -300px;
                left: -330px;
                width: 430px;
                height: 300px;
                background: #fff;
                transform-origin: 100% 100%;
                transform: rotate(225deg);
                clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
                box-shadow: 0px 0 0.5px hsla(170deg, 95%, 80%, 1),
                    0px 0 1px hsla(170deg, 91%, 80%, 0.95), 0px 0 2px hsla(171deg, 91%, 80%, 0.95),
                    0px 0 3px hsla(171deg, 91%, 80%, 0.95), 0px 0 4px hsla(171deg, 91%, 82%, 0.9),
                    0px 0 5px hsla(172deg, 91%, 82%, 0.9), 0px 0 10px hsla(173deg, 91%, 84%, 0.9),
                    0px 0 20px hsla(174deg, 91%, 86%, 0.85), 0px 0 40px hsla(175deg, 91%, 86%, 0.85),
                    0px 0 60px hsla(175deg, 91%, 86%, 0.85);
                animation: scale 2.5s infinite alternate linear;
                mix-blend-mode: hard-light;
            }
            .shadowBottom:local {
                position: absolute;
                top: 300px;
                left: 500px;
                width: 400px;
                height: 300px;
                background: #000;
                transform-origin: 0 100%;
                clip-path: polygon(0 -100%, -200% -100%, -200% 200%, 0 200%);
                box-shadow: 0px 0 0.5px hsla(170deg, 95%, 80%, 1),
                    0px 0 1px hsla(170deg, 91%, 80%, 0.95), 0px 0 2px hsla(171deg, 91%, 80%, 0.95),
                    0px 0 3px hsla(171deg, 91%, 80%, 0.95), 0px 0 4px hsla(171deg, 91%, 82%, 0.9),
                    0px 0 5px hsla(172deg, 91%, 82%, 0.9), 0px 0 10px hsla(173deg, 91%, 84%, 0.9),
                    0px 0 20px hsla(174deg, 91%, 86%, 0.85), 0px 0 40px hsla(175deg, 91%, 86%, 0.85),
                    0px 0 60px hsla(175deg, 91%, 86%, 0.85);
                animation: scaleBottom 2.5s infinite -2.5s alternate linear;
                mix-blend-mode: hard-light;
            }
            // @keyframes scale {
            //     50%,
            //     100% {
            //         transform: rotate(225deg) scale(0);
            //     }
            // }
            // @keyframes scaleBottom {
            //     50%,
            //     100% {
            //         transform: scale(0);
            //     }
            // }
            // @keyframes pointMove {
            //     0% {
            //         --x2Point: 500px;
            //         --y2Point: 600px;
            //     }
            //     50% {
            //         --xPoint: 100px;
            //         --yPoint: 0;
            //         --x2Point: 500px;
            //         --y2Point: 600px;
            //     }
            //     100% {
            //         --xPoint: 100px;
            //         --yPoint: 0;
            //         --x2Point: 500px;
            //         --y2Point: 300px;
            //     }
            // }
        }
    }
}
